<template>
	<view class="index">
		<!-- 轮播图 -->
		<swiper class="swiper" indicator-dots circular>
			<swiper-item v-for="item in swiper" :key="item.id">
				<image :src="item"></image>
			</swiper-item>
		</swiper>
		<!-- 导航区域 -->
		<view class="nav">
			<view class="nav_item" v-for="(item,index) in navList" @click="navigator(item.path)">
				<view :class="item.icon"></view>
				<text>{{item.title}}</text>
			</view>
		</view>
		<!-- 推荐商品 -->
		<view class="hot_goods_title">
			<view class="tit">推荐商品</view>
		</view>
		<goods :recommendList="recommendList"></goods>
	</view>	
</template>

<script>
	import goods_cpn from '../../components/goods_cpn'
	export default {
		data() {
			return {
				swiper:[],
				navList:[
					{
						"icon":"iconfont icon-ziyuan",
						"title":"恒鼎超市",
						"path":"../goods/goods"
					},
					{
						"icon":"iconfont icon-guanyuwomen",
						"title":"联系我们",
						"path":"../contact/contact"
					},
					{
						"icon":"iconfont icon-tupian",
						"title":"社区图片",
						"path":"../pics/pics"
					},
					{
						"icon":"iconfont icon-shipin",
						"title":"学习视频",
						"path":"../learn/learn"
					},
				],
				recommendList:[]
			}
		},
		components:{
			goods:goods_cpn
		},
		onLoad() {
			this.getSwipers()
			this.getRecommend()
		},
		methods: {
			async getSwipers(){
				const res = await this.$myRequest({
					url:'/home/multidata'
				})
				// console.log(res.data.data)
				let data = res.data.data.banner.list
				const image = data.map(item => { return item.image})
				this.swiper=image
			},
			async getRecommend(){
				const res = await this.$myRequest({
					url:'/recommend'
				})
				let data = res.data.data.list
				this.recommendList=data
				console.log(this.recommendList)
			},
			navigator(url){
				console.log(url)
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss">
	.index{
		background-color: #eee;
	}
	swiper{
		width: 750rpx;
		height: 380rpx;
		image{
			height: 100%;
			width: 100%;
		}
	}
	.nav{
		display: flex;
		background:#fff;
		.nav_item{
			width: 25%;
			text-align: center;
			view{
				width: 120rpx;
				height: 120rpx;
				background-color: #b50e03;
				border-radius: 60rpx;
				margin:10px auto;
				line-height: 120rpx;
				color: #fff;
				font-size: 55rpx;
			}
			text{
				font-size: 30rpx;
			}
		}
	}
	.hot_goods_title{
		text-align: center;
		width: 100%;
		height: 50px;
		border-top:3px solid #eee;
		border-bottom:3px solid #eee;
		.tit{
			width: 100%;
			line-height: 50px;
			color:#B50E03;
			letter-spacing: 20px;
			background: #fff;
		}
	}
	.goods_list{
		display:flex;
		margin-left: 5px;
		background: #eee;
		flex-wrap: wrap;
		.goods_item{
			background:#fff;
			width:47%;
			margin:8rpx;
			.item_image{
				margin:0 auto;
				width:90%;
				height: 350rpx;
				image{
					margin-top: 5px;
					width:100%;
					height: 100%;
				}
			}
			.price{
				color:#b50e03;
				margin-left: 12rpx;
				margin-top: 10rpx;
				font-weight: bold;
				font-size: 32rpx;
			}
			.item_title{
				width: 90%;
				margin:0 auto;
				font-size: 25rpx;
				padding-bottom: 5px;
			}
		}
	}
</style>
